.navbar {
    float: left;
    background-color: white;
    width: 10%;
    height: 200px;
    border: 1px solid #ccc;
}

.navbar ul,
.color_list ul{
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.color_list ul{
    display: flex;
}

.navbar li,
.color_list li{
    display: flex;
    align-items: center;
    height: 20px;
    padding: 10px;
}
.color_list li{
    display: flex;
    align-items: center;
    padding: 10px;
}

.navbar li:hover,
.color_list li:hover{
    background-color:#ccc ;
}

#dataContainer {
    float: left;
    width: 45%;
    height: 200px;
    border: 1px solid #ccc;
}
.square{
    width: 10px;
    height: 10px;
    margin-right: 2px;
    border: 1px solid gray;
}
.colorBox{
    display: none;
}
